<template>
  <div class="login_container">
    <div class="login_form">
      <p class="login_title">登录页面</p>
      <el-form
        ref="formName"
        :model="loginData"
        :rules="rules"
        class="demo-ruleForm"
        label-width="100px"
        status-icon
      >
        <el-form-item label="账号" prop="account">
          <el-input v-model="loginData.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginData.password"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input
            v-model="loginData.code"
            auto-complete="false"
            placeholder="点击图片更换验证码"
            style="width: 60%; margin-left: 10px"
            type="text"
          ></el-input>
          <el-image
            :src="this.image"
            class="codeImg"
            @click="resetImg"
          ></el-image>
        </el-form-item>
        <div style="margin-left: 20%">
          <el-checkbox v-model="remember" class="remember">记住密码</el-checkbox>
          <el-checkbox v-model="auto" class="auto">自动登录</el-checkbox>
        </div>
        <div style="margin-top: 3%">
          <el-button size="medium" style="margin-left: 35%;" type="primary" @click="checkCode">登录</el-button>
          <el-button size="medium" type="primary" @click="register">注册</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import api from "@/method/api";
import {setRouter} from "@/router";

const Base64 = require('js-base64').Base64

export default {
  name: "Login",
  data() {
    return {
      image: "", //二维码图片
      code: "", //二维码文字
      loginData: {
        account: "",
        password: "",
        code: "",
      },
      rules: {
        account: [{required: true, message: "请输入账号", trigger: "blur"}],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
        code: [{required: true, message: "请输入验证码", trigger: "blur"}],
      },
      remember: false,
      auto: false,
    };
  },
  methods: {
    //检验验证码
    checkCode() {
      if (this.loginData.code === "") {
        this.$message.info("请输入验证码");
        this.resetImg();
      } else if (this.loginData.code !== this.code) {
        this.$message.info("验证码错误");
        this.resetImg();
      } else {
        this.login()
      }
    },
    //登录
    login() {
      this.loginData.remember = this.remember
      this.loginData.auto = this.auto
      this.$http.post("/login/", this.loginData).then((res) => {
        if (res !== undefined && res !== null) {
          setRouter();
          res["account"] = this.loginData.account
          this.keepStorage(res);
          this.keepAccount();
          this.$router.push("/Index");
        } else {
          //获取验证码
          this.resetImg();
        }
      });
    },
    //注册
    register() {
      this.$router.push("/register");
    },
    //生成验证码
    resetImg() {
      this.$http.post("/code/").then((res) => {
        this.code = res["code"];
        const image = this.$unzip(res["image"]);
        console.log("验证码：" + this.code);
        this.image = "data:image/png;base64," + image;
      });
    },
    //获取客户端信息
    getClientInformation(){
      //ip地址
      sessionStorage.setItem("Ip",api.getIp())
      //浏览器类型
      sessionStorage.setItem("Browser",api.getBrowser())
      //系统类型
      sessionStorage.setItem("OS",api.getOS())
      //屏幕分辨率
      // sessionStorage.setItem("Resolution",api.getResolution())
      //颜色深度
      // sessionStorage.setItem("colorDepth",api.getColorDepth())
    },
    //保存账号密码
    keepAccount() {
      if (this.remember) {
        //账号
        localStorage.setItem('account', this.loginData.account)
        //密码 加密
        let password = Base64.encode(this.loginData.password) // base64加密
        localStorage.setItem('password', password)
        //记住我
        localStorage.setItem("remember", this.remember);
        //自动登录
        localStorage.setItem("auto", this.auto);
      } else {
        localStorage.removeItem('account')
        localStorage.removeItem('password')
        localStorage.removeItem('remember')
        localStorage.removeItem('auto')
      }
    },
    //保存当前用户的缓存
    keepStorage(res) {
      sessionStorage.setItem("token", res["token"]);
      sessionStorage.setItem("username", res["username"]);
      sessionStorage.setItem("tokenName", res["tokenName"]);
      sessionStorage.setItem("account", res["account"]);
    }
  },
  mounted() {
    // this.resetImg();//获取验证码
    this.getClientInformation()
  },
  created() {
    //虚拟登录
    if (this.$route.query["token"] !== undefined) {
      sessionStorage.clear();
      const res = this.$route.query
      this.keepStorage(res);
      this.$router.push("/Index");
    } else {
      //记住密码-回显账号密码
      this.remember = Boolean(localStorage.getItem('remember'))
      if (this.remember) {
        this.loginData.account = localStorage.getItem('account')
        this.loginData.password = Base64.decode(localStorage.getItem('password'))
        this.auto = Boolean(localStorage.getItem('auto'))
        if (this.auto) {
          this.login();
        } else {
          this.resetImg();//获取验证码
        }
      }
      //验证码登录
      else {
        //获取验证码
        this.resetImg();
      }
    }
  },
  watch: {
    remember: function (val) {
      if (val === false) {
        this.auto = false;
      }
    },
    auto: function (val) {
      if (val === true) {
        this.remember = true;
      }
    },
  }
}
</script>
<style lang="less" scoped>
.codeImg {
  margin-top: 5px;
  float: right;
}

.login_container {
  width: 100%;
  height: 100vh;
  background-color: rgba(242, 242, 242, 1);
  background-image: url("~@/assets/images/login.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 1278px 559px;
  border: none;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .login_form {
    width: 510px;
    margin: 0 auto;
    padding: 0 55px 15px 35px;
    background-color: #fff;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 25px #cac6c6;

    .login_title {
      font-family: "微软雅黑 Bold", "微软雅黑", serif;
      font-weight: 700;
      text-decoration: none;
      color: rgb(0, 121, 254);
      font-size: 32px;
      margin-top: 50px;
      margin-bottom: 30px;
      text-align: center;
    }
  }
}
</style>
